<template>
  <div class="setting">
    <h2>食谱配置</h2>
    <el-button type="primary" size="mini" @click="setSwiper"
      >添加食谱</el-button
    >

    <div class="consultation-block">
      <div class="table">
        <el-table size="mini" :data="tableData" style="width: 100%">
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column prop="menuType" label="分类"> </el-table-column>
          <el-table-column prop="desc" label="内容"> </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button
                type="warning"
                size="mini"
                @click="updateMenu(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="deleteMenu(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          @current-change="refreshTable"
          :page-size="pageSize"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="添加食谱"
      :visible.sync="isVisible"
      :close-on-click-modal="false"
      width="30%"
      :before-close="handleAddClose"
    >
      <el-form
        :model="addForm"
        status-icon
        :rules="rules2"
        size="mini"
        ref="addForm"
        label-width="100px"
      >
        <el-form-item label="名称" prop="name">
          <el-input :min="0" type="text" v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="食谱类型" prop="menuType">
          <el-select v-model="addForm.menuType" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.text"
              :label="item.text"
              :value="item.text"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="desc">
          <el-input
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            v-model="addForm.desc"
          ></el-input>
        </el-form-item>
        <el-form-item label="照片" prop="imgs">
          <div class="img-blocks">
            <div
              v-for="(img, index) in addForm.imgs"
              :key="index"
              style="position: relative"
            >
              <img :src="img" style="width: 80px" />
              <i @click="deleteImg(index)" class="el-icon-circle-close"></i>
            </div>
          </div>
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMenu,
  updateSetting,
  addMenu,
  updateMenu,
  deleteMenu,
} from "../service.js";

export default {
  data() {
    return {
      form: {
        swipers: [],
        location: "",
        phone: "",
        openTime: "",
        broadcast: "",
      },
      tableData: [],
      typeList: [
        {
          text: "月经",
        },
        {
          text: "润肺利咽",
        },
        {
          text: "发散解表",
        },
        {
          text: "清热生津",
        },
        {
          text: "解热除烦",
        },
        {
          text: "补气养血",
        },
        {
          text: "清热解毒",
        },
        {
          text: "祛风除湿",
        },
        {
          text: "补肾益肾",
        },
        {
          text: "健脾益脾",
        },
        {
          text: "疏肝理气",
        },
        {
          text: "降脂降压",
        },
        {
          text: "润肤养颜",
        },
      ],
      isVisible: false,
      rules2: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        menuType: [{ required: true, message: "请选择", trigger: "blur" }],
        desc: [{ required: true, message: "请输入", trigger: "blur" }],
        imgs: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      addForm: {
        name: "",
        desc: "",
        menuType: "",
        imgs: [],
      },
      imgUrl: "localhost:3000/uploads/",
    };
  },
  mounted() {
    this.refreshTable();
  },
  methods: {
    handleAvatarSuccess(info) {
      this.addForm.imgs.push(info.imgName);
    },
    handleAddClose() {
      this.isVisible = false;
    },
    saveForm() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.swipers = form.swipers.join(",");
      console.log(form);
      updateSetting(form).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    setSwiper() {
      this.addForm = {
        name: "",
        desc: "",
        menuType: "",
        imgs: [],
      };
      this.isVisible = true;
    },
    refreshTable() {
      getMenu({
        page: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.tableData = res.data.data;
        for (let item of this.tableData) {
          let imgs = JSON.parse(item.imgs);
          item.imgs = imgs;
        }
        console.log(res);
        this.total = res.data.total;
      });
    },
    deleteImg(index) {
      this.addForm.imgs.splice(index, 1);
    },
    updateMenu(row) {
      this.addForm = JSON.parse(JSON.stringify(row));
      this.isVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addForm.id) {
            let imgs = JSON.stringify(this.addForm.imgs);
            updateMenu(this.addForm.id, {
              ...this.addForm,
              imgs,
            }).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.isVisible = false;
                this.refreshTable();
              } else {
                this.$message.error(res.msg);
              }
            });
            // 编辑
          } else {
            console.log(this.addForm);
            let imgs = JSON.stringify(this.addForm.imgs);
            addMenu({
              ...this.addForm,
              imgs,
            }).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.isVisible = false;
                this.refreshTable();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    deleteMenu(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteMenu(row.id).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.isVisible = false;
            this.refreshTable();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border: 1px dashed gray;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
.img-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.el-icon-circle-close {
  position: absolute;
  top: -5px;
  right: -5px;
  cursor: pointer;
  color: red;
}
</style>
